<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/index.css?v2">
  <link rel="stylesheet" href="./css/layer.css" />
  <link rel="stylesheet" href="./style/base.css" />
  <link rel="stylesheet" href="./lib/css/jquery-weui.min.css" />

  <script type="text/javascript" src="./js/jquery.min.js"></script>

  <script src="./js/fastclick.js"></script>
  <script>
      $(function() {
          FastClick.attach(document.body);
      });
  </script>
  
  <script type="text/javascript" src="./js/layer.m.js"></script>
  <script type="text/javascript" src="./lib/js/jquery-weui.min.js"></script>
  <script type="text/javascript" src="./js/md5.js"></script>

  


  <script>
    // 这段代码是必须的，让头部能根据手机宽度变化而缩放
    // 而且必须放在 <head> 中，先于样式加载
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);

      recalc();
    })(document, window);
  </script>
</head>

<body id="container">
  <!--index.wxml-->
  <div class="container">
    <!-- <div class="test"></div> -->

    <div class="page-bg pageBackground" id="nest_cloud_page_bg">
      <!-- <img class="oval-image" src="./images/oval.png" />
      <img class="gold-image" src="./images/gold.png" /> -->

    </div>
    <!-- <img class="light-dot" src="./images/light-dot.png" />
    <img class="spark" src="./images/spark.png" />
    <img class="logo" src="./images/logo.png" /> -->
    <!-- <img class="lottery-text" src="./images/lottery-text.png" /> -->
    <div data-egg='left' class="egg-box egg-left">
      <img class="egg-shadow" src="./images/shadow.png" />
      <div class="egg-info">
        <img class="egg left" src="./images/egg.png" id="left" class="left" />
      </div>
    </div>
    <div data-egg='middle' class="egg-box egg-middle">
      <img class="egg-shadow" src="./images/shadow.png" />
      <div class="egg-info">
        <img class="egg middle" src="./images/egg.png" id="middle" class="middle" />
      </div>
    </div>
    <div data-egg='right' class="egg-box egg-right">
      <img class="egg-shadow" src="./images/shadow.png" />
      <div class="egg-info">
        <img class="egg right" src="./images/egg.png" id="right" class="right" />
      </div>
    </div>
    <div class="egg-broken-wrap">
      <div class="egg-broken shakeAnimate">
        <img class="egg_1" src="./images/egg_1.png" />
        <img class="egg_2" src="./images/egg_2.png" />
        <img class="egg_3" src="./images/egg_3.png" />
        <img class="egg_4" src="./images/egg_4.png" />
      </div>
      <img class="flower" src="./images/flower.png" />
      <div class="column-wrap">
        <div class="column-info">
          <div class="column-animte">
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
            <img class="column-image" src="./images/column.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- <img class="main-title" src="./images/text.png" id="nest_cloud_4" /> -->
    <!-- <img class="gift" style="display:none" src="./images/gift.png" /> -->
    <p style="text-align: center;color:black;font-size: 0.3rem;z-index: 10;position: absolute;left: 0;top:10rem;width: 100%;"
      id="lotteryTimes"></p>
    <img class="btn" src="./images/btn.png" style="z-index:8;" />
    <img class="hammer" src="./images/hammer.png" />
    <div class="light">
      <img class="light-sprites" src="./images/light-sprites.png" />
    </div>
    <!--已抽奖再次进入页面地上出现碎片-->
    <div class="lotteryed">
      <!--第一个蛋破裂-->
      <img class="floor-image floor-left" src="./images/floor.png" />
      <!--第二个蛋破裂-->
      <img class="floor-image floor-middle" src="./images/floor.png" />
      <!--第三个蛋破裂-->
      <img class="floor-image floor-right" src="./images/floor.png" />
    </div>

  </div>

  <script type="text/javascript" src="./lib/js/city_new.min.js"></script>
  <script type="text/javascript" src="./lib/js/cityPicker.js"></script>
  <script type="text/javascript" src="./lib/js/jquery-weui.min.js"></script>
  <script src="./script/utils.js"></script>
  <script src="./script/index.js?71223"></script>


  <style>
    .layermchild h3 {
      height: 1rem;
      line-height: 1rem;
      font-size: 26px;
    }

    .layermcont {
      padding: 0.3rem 0.3rem;
    }

    .pwd {
      height: 0.8rem;
      margin-bottom: 0.5rem;
    }

    .pwd input {
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.5rem;
      margin: 0rem auto;
    }

    .layermcont .button {
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.5rem;
    }

    .layermchild {
      font-size: 0.48rem;
    }

    .layermcont {
      line-height: 0.6rem;
    }

    .layermcont .button {
      font-size: 20px;
    }

    .layermcont .zjnotice {
      line-height: 0.8rem;
    }

    .weui-picker-modal {
      height: 4.2rem;
    }

    html {
      touch-action: none;
    }

    input::-webkit-input-placeholder {
      font-size: 16px;
    }

    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      font-size: 16px;
    }

    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      font-size: 16px;
    }

    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      font-size: 16px;
    }

    .address_modal {
      height: 0.8rem;
      text-align: center;
      line-height: 0.8rem;
      background-color: transparent;
      border-radius: 5px;
      border: 1px solid #ff9800 !important;
      color: #ff9800;
      font-size: 18px;
    }

    .toolbar, .toolbar .title {
        font-size: 0.43rem;
    }
    .weui-picker-modal .picker-items {
      font-size: 0.48rem;
    }
    body .layermcont {
      word-break: break-all;
      overflow: hidden;
      max-height: 225px;
      font-size: 16px;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding-bottom: 50px;
    }
    .login-popuo .layermcont {
      padding-bottom: 80px;
    }
    .form-item input {
      font-size: 16px;
    }

    @media screen and (max-width: 280px) {
    #lotteryTimes {
        font-size: 16px!important;
    }
}
  </style>

</body>

</html>